<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>数字化公寓来访登记</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div
      class="p-4"
      x-data="{
        name: '',
        phone: null,
        friendName: '',
        friendRoomNo: null,
        reason: '',
        loading: false,
        dept: null
      }"
    >
      <div class="fs-1 fw-bold text-center">数字化公寓demo</div>
      <div class="fs-4 text-center mb-3">访客登记</div>

      <div class="fs-4 text-center mb-3" x-init="getDataFromUrl($data)">
        <span class="">欢迎来到 </span
        ><span class="badge text-bg-primary" x-text="dept"></span>
      </div>

      <div class="mb-3">
        <label for="a" class="form-label">访客姓名(demo)</label>
        <input class="form-control" id="a" placeholder="" x-model="name" />
      </div>

      <div class="mb-3">
        <label for="b" class="form-label">访客手机</label>
        <input
          class="form-control"
          id="b"
          type="tel"
          placeholder=""
          x-model="phone"
        />
      </div>

      <div class="mb-3">
        <label for="c" class="form-label">被访人姓名</label>
        <input
          class="form-control"
          id="c"
          placeholder=""
          x-model="friendName"
        />
      </div>

      <div class="mb-3">
        <label for="d" class="form-label">被访人房号</label>
        <input
          class="form-control"
          id="d"
          type="number"
          placeholder=""
          x-model="friendRoomNo"
        />
      </div>

      <div class="mb-3">
        <label for="e" class="form-label">来访事由</label>
        <textarea
          class="form-control"
          id="e"
          rows="3"
          x-model="reason"
        ></textarea>
      </div>

      <div x-show="!loading" class="d-grid gap-2">
        <button
          class="btn btn-primary"
          :class="loading ? 'disabled placeholder-glow': ''"
          type="button"
          @click="handleSubmit($data)"
        >
          <span x-show="!loading">提交</span>

          <div x-show="loading">
            <span
              class="spinner-border spinner-border-sm"
              aria-hidden="true"
            ></span>
            <span role="status">提交中...</span>
          </div>
        </button>

        <button
          class="btn btn-danger"
          type="button"
          @click="getDemoUserInfo()"
        >
          Demo Local Overrides
        </button>

        <button
          class="btn btn-warning"
          type="button"
          @click="handleReset($data)"
        >
          重置
        </button>

        <button
          class="btn btn-success"
          type="button"
          @click="handleSubscribe($data)"
        >
          subscribe
        </button>
      </div>
    </div>

    <script src="observer.js"></script>

    <script>
      function getDataFromUrl(data) {
        const fromUrlData = new URL(window.location.href);
        const dept = fromUrlData.searchParams.get("dept");

        data.dept = dept;
      }

      function handleSubmit(data) {
        data.loading = !data.loading;
        console.log(`${data.name}, ${data.phone}, ${data.dept}`);
        setTimeout(() => {
          data.loading = !data.loading;
        }, 2000)
      }

      function handleReset(data) {
        data.loading = !data.loading;
      }

      async function getDemoUserInfo() {
        const response = await fetch('http://localhost:3001/api/user-info')
        const data = await response.json()
        console.log(data)
      }

      const observer = new Observable();

      function handleSubscribe(data) {
        observer.notify(data);
      }

      observer.subscribe((data) => {
        console.log(
          new Date().toLocaleString(),
          `${data.name}, ${data.phone}, ${data.dept}`
        );
      });
    </script>

    <script defer src="alpinejs@3.15.0.min.js"></script>
  </body>
</html>
